<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>520祝福</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: #0a0a2a;
            font-family: 'Arial', sans-serif;
            overflow: hidden;
            position: relative;
        }

        .heart-container {
            position: relative;
            width: 200px;
            height: 180px;
            margin-bottom: 20px;
            z-index: 10;
        }

        .heart {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: #ff4d4d;
            transform: rotate(-45deg);
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) rotate(-45deg);
            animation: heartbeat 0.8s infinite;
        }

        .heart:before,
        .heart:after {
            content: "";
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: #ff4d4d;
            border-radius: 50%;
        }

        .heart:before {
            top: -50px;
            left: 0;
        }

        .heart:after {
            left: 50px;
            top: 0;
        }

        @keyframes heartbeat {
            0% {
                transform: translate(-50%, -50%) scale(1) rotate(-45deg);
            }
            25% {
                transform: translate(-50%, -50%) scale(1.3) rotate(-45deg);
            }
            50% {
                transform: translate(-50%, -50%) scale(1) rotate(-45deg);
            }
            75% {
                transform: translate(-50%, -50%) scale(1.1) rotate(-45deg);
            }
            100% {
                transform: translate(-50%, -50%) scale(1) rotate(-45deg);
            }
        }

        .message {
            text-align: center;
            font-size: 24px;
            margin-top: 40px;
            color: #fff;
            font-weight: bold;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
            z-index: 10;
        }

        .date {
            font-size: 18px;
            color: #fff;
            margin-top: 10px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
            z-index: 10;
        }

        .stars {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 0;
        }

        .star {
            position: absolute;
            background-color: #fff;
            border-radius: 50%;
            animation: twinkle 3s infinite;
        }

        @keyframes twinkle {
            0% { opacity: 0.2; }
            50% { opacity: 1; }
            100% { opacity: 0.2; }
        }

        .meteor {
            position: absolute;
            width: 2px;
            height: 2px;
            background-color: transparent;
            border-radius: 50%;
            opacity: 0;
            z-index: 5;
        }

        .meteor::after {
            content: '';
            position: absolute;
            width: 200px;
            height: 2px;
            background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.8));
            transform: rotate(45deg);
            transform-origin: left center;
        }
    </style>
</head>
<body>
<div class="stars" id="stars"></div>

<div class="heart-container">
    <div class="heart"></div>
</div>

<div class="message">岁月漫长，愿日常皆是温暖</div>
<div class="date">2025年5月20日</div>

<script>
    // 创建星星背景
    function createStars() {
        const starsContainer = document.getElementById('stars');
        const starCount = 200;

        for (let i = 0; i < starCount; i++) {
            const star = document.createElement('div');
            star.className = 'star';

            const posX = Math.random() * window.innerWidth;
            const posY = Math.random() * window.innerHeight;
            star.style.left = `${posX}px`;
            star.style.top = `${posY}px`;

            const size = Math.random() * 3 + 1;
            star.style.width = `${size}px`;
            star.style.height = `${size}px`;

            star.style.animationDelay = `${Math.random() * 3}s`;
            starsContainer.appendChild(star);
        }
    }

    // 创建逼真的流星
    function createMeteor() {
        const meteor = document.createElement('div');
        meteor.className = 'meteor';

        const startX = Math.random() * window.innerWidth * 0.6;
        const startY = Math.random() * window.innerHeight * 0.4;

        const distance = Math.hypot(window.innerWidth, window.innerHeight);
        const angle = 45 * Math.PI / 180;

        const endX = startX + Math.cos(angle) * distance;
        const endY = startY + Math.sin(angle) * distance;

        const duration = Math.random() * 3 + 5; // 1.5~3秒
        meteor.style.left = `${startX}px`;
        meteor.style.top = `${startY}px`;
        meteor.style.opacity = '1';

        document.body.appendChild(meteor);

        const animationName = `meteorAnim${Date.now()}`;
        const style = document.createElement('style');
        style.innerHTML = `
        @keyframes ${animationName} {
          0% {
            left: ${startX}px;
            top: ${startY}px;
            opacity: 1;
          }
          100% {
            left: ${endX}px;
            top: ${endY}px;
            opacity: 0;
          }
        }
        .${animationName} {
          animation: ${animationName} ${duration}s linear forwards;
        }
      `;
        document.head.appendChild(style);
        meteor.classList.add(animationName);

        setTimeout(() => {
            meteor.remove();
            style.remove();
            setTimeout(createMeteor, Math.random() * 3000); // 下一颗出现延迟
        }, duration * 1000 + 100);
    }

    // 初始化
    createStars();
    for (let i = 0; i < 15; i++) {
        setTimeout(createMeteor, i * 1000);
    }

    function updateDate() {
        const now = new Date();
        const year = now.getFullYear();
        const month = now.getMonth() + 1;
        const day = now.getDate();
        if (month === 5 && day === 20) {
            document.querySelector('.date').textContent = `${year}年5月20日`;
        } else {
            document.querySelector('.date').textContent = `提前/延后祝福: ${year}年5月20日`;
        }
    }

    updateDate();

    const messages = [
        "愿时光悠长，日常皆有诗意",
        "愿朝暮有情，山水有意",
        "愿人间烟火里，皆是暖意",
        "愿所遇皆美好，所行皆坦途",
        "520，快乐"
    ];

    function changeMessage() {
        const messageElement = document.querySelector('.message');
        const currentText = messageElement.textContent;
        const nextIndex = (messages.indexOf(currentText) + 1) % messages.length;
        messageElement.textContent = messages[nextIndex];
        setTimeout(changeMessage, 3000);
    }

    setTimeout(changeMessage, 3000);
</script>
</body>
</html>
